<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus'
const props=defineProps(['userlist'])
const emit=defineEmits(["catchs","edituser"])
import {EditUser} from "../../api/users"
const ruleFormRef = ref()
const userFrom=ref({
    name:"",
    password:"",
    acter:'',
    resume:""
})
const rules=({
   name:[
    { required: true, message: '用户名没有填写', trigger: 'blur' },
    { min: 1, max: 5, message: '长度在 3 to 5', trigger: 'blur' }
     ],
    password:[
    { required: true, message: '密码没有填写', trigger: 'blur' },
    { min: 1, max: 8, message: '长度在 3 to 5', trigger: 'blur' }
     ],
    acter:[
    { required: true, message: '性别没有填写', trigger: 'blur' },
    { min: 1, max: 5, message: '长度在 3 to 5', trigger: 'blur' }
     ],
    resume:[
    { required: true, message: '简历没有填写', trigger: 'blur' },
     ],
})
onMounted(()=>{
  userFrom.value=props.userlist
})

//确定
const submitForm=async()=>{
      const res=await EditUser(userFrom.value)
      if(res.data.status==200){
       ElMessage({
        type: 'success',
        message:res.data.massage,
         })
         emit("edituser")
      }else{
        ElMessage.error('修改失败')
      }
}
const resetForm=()=>{
   emit('catchs')
}
</script>
<template>
        <div class="useredit">
         <el-card style="max-width: 480px">
            <el-form
              ref="ruleFormRef"
              style="max-width: 600px"
              :model="userFrom"
              :rules="rules"
              label-width="auto"
            >
             <el-form-item label="用户名" prop="name">
                <el-input v-model="userFrom.name" />
             </el-form-item>
             <el-form-item label="密码" prop="name">
                <el-input v-model="userFrom.password" />
             </el-form-item>
             <el-form-item label="角色" prop="name">
                <el-input v-model="userFrom.acter" />
             </el-form-item>
             <el-form-item label="个人简历" prop="name">
                <el-input type="textarea" v-model="userFrom.resume" />
             </el-form-item>
            <el-form-item class="buttonbox">
            <el-button type="primary" @click="submitForm">确定</el-button>
            <el-button @click="resetForm">取消</el-button>
            </el-form-item>
            </el-form>
        </el-card>
        </div>
</template>
<style lang="less" scoped>
.buttonbox{
    margin-top: 30px;
}
</style>